<template>
	<view class="addStudent">
		<view class="student_info">
			<view class="">
				<view class="info_name"><text>*</text>学生姓名</view>
				<input type="text" v-model="joinData.studentName" placeholder="请输入学生姓名" placeholder-class="no_val" />
			</view>
			<view class="">
				<view class="info_name"><text>*</text>性别</view>
				<radio-group @change="genderChange">
					<label class="radio">
						<radio style="transform:scale(0.7)" color="#2E80FE" value="1"
							:checked="joinData.studentGender==1" />男
					</label>
					<label class="radio">
						<radio style="transform:scale(0.7)" color="#2E80FE" value="0"
							:checked="joinData.studentGender==0" />女
					</label>
				</radio-group>
			</view>
			<view class="">
				<view class="info_name"><text>*</text>身份证号</view>
				<input type="idcard" v-model="joinData.studentCardId" maxlength="18" placeholder="请输入身份证号" placeholder-class="no_val" />
			</view>
			<view class="">
				<view class="info_name"><text>*</text>家长电话</view>
				<input type="number" v-model="joinData.parentsPhone" maxlength="11" placeholder="请输入家长电话" placeholder-class="no_val" />
			</view>
			<view class="">
				<view class="info_name">所在学校</view>
				<input type="text" v-model="joinData.studentSchool" placeholder="请输入学生所在学校"
					placeholder-class="no_val" />
				<!-- <picker @change="schoolChange" :range="schoolList">
					<view :class="{'no_val':schoolIndex==-1}">{{schoolIndex==-1?'请选择学校':schoolList[schoolIndex]}}</view>
				</picker>
				<uni-icons type="bottom" color="#CCCCCC" size="14"></uni-icons> -->
			</view>
			<view class="">
				<view class="info_name">所在年级</view>
				<input type="text" v-model="joinData.studentGrade" placeholder="请输入学生所在年级" placeholder-class="no_val" />
				<!-- <picker @change="gradeChange" :range="gradeList">
					<view :class="{'no_val':gradeIndex==-1}">{{gradeIndex==-1?'请选择年级':gradeList[gradeIndex]}}</view>
				</picker>
				<uni-icons type="bottom" color="#CCCCCC" size="14"></uni-icons> -->
			</view>
			<view class="">
				<view class="info_name">所在班级</view>
				<input type="text" v-model="joinData.studentClass" placeholder="请输入学生所在班级" placeholder-class="no_val" />
				<!-- <picker @change="classChange" :range="classList">
					<view :class="{'no_val':classIndex==-1}">{{classIndex==-1?'请选择班级':classList[classIndex]}}</view>
				</picker>
				<uni-icons type="bottom" color="#CCCCCC" size="14"></uni-icons> -->
			</view>
		</view>
		<view class="submit_btn" @click="submitInfo" v-if="!id">确认</view>
		<view class="submit_btn" @click="saveInfo" v-else>保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				joinData: {
					studentGender: 1,
					studentSchool: '',
					studentGrade: '',
					studentClass: '',
					studentName: '',
					studentCardId: '',
					parentsPhone: '',
				},
				id: '',


			};
		},
		onLoad(e) {
			if (e.id != undefined) {
				this.id = parseInt(e.id);
				this.getDetail();
			}
		},
		methods: {
			schoolChange(e) {
				this.schoolIndex = e.detail.value
			},
			gradeChange(e) {
				this.gradeIndex = e.detail.value
			},
			classChange(e) {
				this.classIndex = e.detail.value
			},
			genderChange(e) {
				this.joinData.studentGender = parseInt(e.detail.value);
			},
			getCard(card) {
				let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				return reg.test(card)
			},
			async submitInfo() {
				const {
					studentSchool,
					studentGrade,
					studentClass,
					studentName,
					studentCardId,
					parentsPhone
				} = this.joinData
				switch (true) {
					// case !studentSchool:
					// 	this.showToast('请输入学生所在学校~')
					// 	break;
					// case !studentGrade:
					// 	this.showToast('请输入学生所在年级~')
					// 	break;
					// case !studentClass:
					// 	this.showToast('请输入学生所在班级~')
					// 	break;
					case !studentName:
						this.showToast('请输入学生姓名~')
						break;
					case !this.getCard(studentCardId):
						this.showToast('请输入正确身份证号~')
						break;
					case !/^1[3456789]\d{9}$/.test(parentsPhone):
						this.showToast('请输入正确手机号~')
						break;
					default:
						this.onReq()
				}


			},
			async onReq() {
				var v = this.joinData;
				if( !v.studentName || !v.studentCardId || !v.parentsPhone ) {
					uni.showToast({
						title: '请完善表单信息~',
						icon: 'none'
					})
					return 
				}
				const res = await this.$api.post('joiner/add', this.joinData);
				if (res.code == 200) {
					uni.showToast({
						title: '操作成功',
						complete: () => {
							setTimeout(v => {
								uni.navigateBack()
							}, 2500)
						}
					})
				}
			},
			async getDetail() {
				const res = await this.$api.get(`joiner/info/${this.id}`);
				if (res.code == 200) {
					var v = res.data;
					this.joinData = {
						studentGender: v.studentGender,
						studentSchool: v.studentSchool,
						studentGrade: v.studentGrade,
						studentClass: v.studentClass,
						studentName: v.studentName,
						studentCardId: v.studentCardId,
						parentsPhone: v.parentsPhone,
					}
				}
			},
			async saveInfo() {
				this.joinData.id = this.id;
				const res = await this.$api.post('joiner/edit', this.joinData);
				if (res.code == 200) {
					uni.showToast({
						title: '操作成功',
						complete: () => {
							setTimeout(v => {
								uni.navigateBack()
							}, 2500)
						}
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.addStudent {
		padding: 46rpx 20rpx;
		box-sizing: border-box;

		.student_info {
			width: 100%;
			padding: 0 26rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 112rpx;

			>view {
				padding: 48rpx 0 38rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #e6e6e6;

				.info_name {
					font-size: 27rpx;
					width: 180rpx;
					text {
						color: #FF0000;
					}
				}

				picker,
				input,
				radio-group {
					flex: 1;
					font-size: 26rpx;
					margin: 0 20rpx 0 40rpx;
				}

				.no_val {
					color: #ccc;
				}

				.radio:first-child {
					margin-right: 178rpx;
				}
			}
		}

		.submit_btn {
			width: 100%;
			height: 94rpx;
			background-color: #2E80FE;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14rpx;
			text-align: center;
			line-height: 94rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}
	}
</style>